<template>
    <div>
        <Row class="formRow">
          <Col span="2" class="rightRow">
            <span class="ModelInputTitle">角色编号</span>
          </Col>
          <Col span="2" class="leftRow">
            <Input v-model="formInline.userCode" placeholder="角色编号" clearable style="width: 100%" size="large"></Input>
          </Col>
          <Col span="2" class="rightRow">
            <span class="ModelInputTitle">角色名称</span>
          </Col>
          <Col span="2" class="leftRow">
            <Input v-model="formInline.userName" placeholder="角色名称" clearable style="width:100%" size="large"></Input>
          </Col>
          <Col span="2" class="rightRow">
            <span class="ModelInputTitle">是否有效</span>
          </Col>
          <Col span="2" class="leftRow">
            <Select  size="large" style="width:100%" v-model="formInline.isYouxiao">
              <Option  value="1" >是</Option>
              <Option  value="0" >否</Option>
            </Select>
          </Col>
          <Col span="12" class="leftRow">
            <Button type="primary" @click="onSubmit">查询</Button>
            <Button type="primary" @click="resetForm">重置</Button>
            <Button type="primary" @click="onAdd">添加</Button>
          </Col>
        </Row>


      <Table :data="tableData" :columns="cloums" stripe :loading="loading"  style="margin-top: 20px"></Table>
      <div style="margin: 10px;overflow: hidden">
        <div style="float: right;">
          <Page :total="total" :current="1" :placement="placement" @on-change="changePage" show-total show-elevator show-sizer @on-page-size-change="changeSize"></Page>
        </div>
      </div>


      <Modal
        v-model="add"
        title="添加"
        @on-ok="addok"
        @on-cancel="cancel('您取消了操作')" width="600">
        <Row>
          <Col span="12">   <span class="ModelInputTitle"><Icon type="ios-medical" color="red"></Icon>角色编号</span><Input v-model="addUser.userCode" style="width: 200px"></Input></Col>
          <Col span="12">   <span class="ModelInputTitle"><Icon type="ios-medical" color="red"></Icon>角色名称</span><Input v-model="addUser.userName" style="width: 200px"></Input></Col>
        </Row>
        <Row style="margin-top: 20px">
          <Col span="12">   <span class="ModelInputTitle">是否有效</span><Select   v-model="addUser.valid" style="width: 200px">
          <Option  value="1" >是</Option>
          <Option  value="0" >否</Option>
        </Select></Col>
          <Col span="12">   <span class="ModelInputTitle">备注</span><Input v-model="addUser.remark" style="width: 200px"></Input></Col>
        </Row>
      </Modal>

      <Modal
        v-model="edit"
        title="编辑"
        @on-ok="editok"
        @on-cancel="cancel('您取消了操作')" width="600">
        <Row>
          <Col span="12">   <span class="ModelInputTitle">角色编号</span><Input v-model="editForm.roleCode" style="width: 200px" disabled></Input></Col>
          <Col span="12">   <span class="ModelInputTitle">角色名称</span><Input v-model="editForm.roleName" style="width: 200px"></Input></Col>
        </Row>

        <Row style="margin-top: 20px">
          <Col span="12">   <span class="ModelInputTitle">是否有效</span> <Select   v-model="editForm.valid" style="width: 200px">
          <Option  value="1" >是</Option>
          <Option  value="0" >否</Option>
        </Select></Col>
          <Col span="12">   <span class="ModelInputTitle">备注</span><Input v-model="editForm.remark" style="width: 200px"></Input></Col>
        </Row>
      </Modal>

      <Modal
        v-model="menu"
        title="分配角色"
        @on-ok="menuok"
        @on-cancel="cancel('您取消了操作')" width="600">

        <Tree :data="munuData" show-checkbox multiple  @on-check-change = "getCheckChange"></Tree>

      </Modal>
    </div>
</template>
<script type="text/ecmascript-6">
  import  axios from "axios"
    export default {
        data() {
            return {
              formInline:{
                userCode:"",
                userName:"",
                isYouxiao:""
              },
              add:false,//添加的模态框
              addUser:{
                userCode:"",
                userName:"",
                valid:"",
                remark:""
              },
              edit:false,//编辑模态框
              editForm:{
                roleCode:"",
                remark:"",
                valid:"",
                id:""
              },
              selectArr:[],
              menu:false,//分配菜单
              munuData:[],//分配菜单树形控件数据
              roleMenu:{
                userCode:"",
                userName:"",
                creator:"",
                menuIdArrayStr:""
              },
              page:1,//页数
              pageSize:10,//每页条数
              placement:"bottom",
              loading:true,
              total:0,//总条数
              tableData:[],//表格数据
              cloums:[
                {
                  title: '角色编码',
                  key: 'roleCode',
                  width:200,
                  align:"center"
                },
                {
                  title: '角色名称',
                  key: 'roleName',
                  width:200,
                  align:"center"
                },
                {
                  title: '是否有效',
                  key: 'valid',
                  width:100,
                  align:"center"
                },
                {
                  title: '备注',
                  key: 'remark',
                  width:300,
                  align:"center"
                },
                {
                  title: '创建人',
                  key: 'creator',
                  width:150,
                  align:"center"
                },
                {
                  title: '更新人',
                  key: 'updater',
                  align:"center"
                },
                {
                  title: '操作',
                  fixed:"right",
                  width:200,
                  align:"center",
                  render:(h,params)=>{
                      return  h("div",[
                        h("Button",{
                          props:{
                            type:"primary",
                            size:"small"
                          },
                          style:{
                            marginRight:"5px"
                          },
                          on:{
                            click:()=>{
                              this.edit = true;
                              this.editForm.roleCode = params.row.roleCode;
                              this.editForm.roleName = params.row.roleName;
                              this.editForm.valid = params.row.valid=="是"?"1":"0";
                              this.editForm.remark = params.row.remark;
                              this.editForm.id = params.row.id;
                            }
                          }
                        },"编辑"),
                        h("Button",{
                          props:{
                            type:"error",
                            size:"small"
                          },
                          style:{

                          },
                          on:{
                            click:()=>{
                              var _this = this;
                              _this.menu = true;
                              console.log(params.row);
                              _this.roleMenu.roleCode = params.row.roleCode;
                              _this.roleMenu.creator = params.row.creator;
                              _this.munuData = [];
                              var qs = require("qs");
                              var param = qs.stringify({roleCode:params.row.roleCode});
                              axios.post("/menu/showMenuTreeByRoleCode",param).then((res)=>{
                                _this.munuData = res.data.data.sysMenuTreeVoList;
                              })
                            }
                          }
                        },"分配菜单")
                      ])
                  }
                },
              ]
            }
        },
      mounted(){
          this.init();
      },
      methods:{
        init(page,pageSize,roleCode,roleName,valid){
          var qs = require("qs")
              var param = qs.stringify({
                page:page?page:this.page,
                pageSize:pageSize?pageSize:this.pageSize,
                roleCode:roleCode?roleCode:"",
                roleName:roleName?roleName:"",
                valid:valid?valid:""
              })
          axios.defaults.headers.common['Authorization'] = sessionStorage.getItem("token");
          axios.post("/role/querySysRoleListByPage",param).then((res)=>{
            if(res.data.code=="000000"){
              this.loading = false;
              this.tableData = res.data.data;
              this.total = res.data.count;
              for(var i in this.tableData){
                this.tableData[i].valid=this.tableData[i].valid==1?"是":"否";
              }
            }else{
              this.$Notice.error({title:res.data.msg});
            }
          })
        },
        //查询
        onSubmit(){
            this.init(this.page,this.pageSize,this.formInline.userCode,this.formInline.userName,this.formInline.isYouxiao);
        },
//        重置
        resetForm(){
            this.formInline.userCode = "";
            this.formInline.userName = "";
            this.formInline.isYouxiao = "";
            this.page = 1;
        },
        onAdd(){
          this.add = true;
        },
        addok(){
          if(this.addUser.userCode==""||this.addUser.userCode==null){
            this.$Notice.error({title:"角色编码不能为空"});
            return false;
          }
          if(this.addUser.userName==""||this.addUser.userName==null){
            this.$Notice.error({title:"角色名称不能为空"});
            return false;
          }
          var qs = require("qs");
          var param = qs.stringify({
            roleCode:this.addUser.userCode,
            roleName:this.addUser.userName,
            valid:this.addUser.valid,
            remark:this.addUser.remark
          });
          axios.post("/role/addRole",param).then((res)=>{
            if(res.data.code=="000000"){
              this.$Notice.success({title:"添加成功"});
              this.init();
            }else{
              this.$Notice.error({title:res.data.msg});
            }
          })
        },
        editok(){
          var qs = require("qs");
          var param = qs.stringify({
            roleCode:this.editForm.roleCode,
            roleName:this.editForm.roleName,
            remark:this.editForm.remark,
            valid:this.editForm.valid,
            id:this.editForm.id
          });
          axios.post("/role/updateRole",param).then((res)=>{
            if(res.data.code=="000000"){
              this.$Notice.success({title:"修改成功"});
              this.init();
            }else{
              this.$Notice.error({title:res.data.msg});
            }
          });
        },
        //分配角色
        menuok(){
            var arr = [];
            for(let i=0;i<this.selectArr.length;i++ ){
              arr.push(this.selectArr[i].id)
            }
          var qs = require("qs");
          var param = qs.stringify({
            roleCode:this.roleMenu.roleCode,
            creator:this.roleMenu.creator,
            menuIdArrayStr:arr.join(",")
          });
          axios.post("/menu/saveMenuByRoleCode",param).then((res)=>{
            if(res.data.code=="000000"){
              this.$Notice.success({title:"修改成功"});
              this.init();
            }else{
              this.$Notice.error({title:res.data.msg});
            }
          })
        },
        getCheckChange(arr){
         this.selectArr = arr;
        },
        changePage(page){
          this.loading = true;
          this.page = page;
          this.init();
        },
        changeSize(size){
          this.placement = size>=20?"top":"bottom";
          this.loading = true;
          this.pageSize = size;
          this.init();
        },
        cancel (msg) {
          this.$Notice.info({title:msg});
        },
      }
    }
</script>
